<template>
  <view class="container">
    <view class="content">
      <view class="words">
        {{ words.content }}
      </view>
      <view class="autor">{{ words.autor }}</view>
    </view>
  </view>
</template>

<script>
import oneWords from '../store/oneWords.js'
export default {
  data() {
    return {
      words: oneWords.getOneWord()
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 1rem;
  box-sizing: border-box;
  width: 100%;
  height: 10rem;
  /* border: 1px solid #000; */
  padding: 1rem;
  background-image: url('../static/水墨背景2.png');
  background-size: cover;
}

.content {
  width: 100%;
  height: 100%;
  position: relative;
}

.words {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.autor {
  text-align: right;
  position: absolute;
  top: 0.1rem;
  right: 0.5rem;
}
</style>
